<script lang="ts" setup>
import { ref } from "vue"

const dataList = ref<any[]>([
    {
        executedAt: '09:00',
        description: '--',
        outline: '--',
        script: '--',
        note: '--',
    },
    {
        executedAt: '11:00',
        description: '--',
        outline: '--',
        script: '--',
        note: '--',
    },
    {
        executedAt: '14:00',
        description: '--',
        outline: '--',
        script: '--',
        note: '--',
    },
    {
        executedAt: '16:00',
        description: '--',
        outline: '--',
        script: '--',
        note: '--',
    },
    {
        executedAt: '18:00',
        description: '--',
        outline: '--',
        script: '--',
        note: '--',
    },
])

const modalVisible = ref(false)
const formAction = ref('')

const handleAction = (action: string) => {
    if (action === 'add') {
        modalVisible.value = true
        formAction.value = 'add'
    }
};
</script>

<template>
  <umrp-container :gap="16" padding="16px" bg-color="#f2f2f2" height="100%">
    <umrp-breadcrumb :items="['活动管理', '活动流程']"></umrp-breadcrumb>
    <umrp-row :gutter="16" style="flex:1">
      <umrp-col :span="4" style="height:100%">
        <umrp-card :border="false" style="height:100%">
          <umrp-menu>
            <umrp-menu-item key="1">第一天</umrp-menu-item>
            <umrp-menu-item key="2">第二天</umrp-menu-item>
            <umrp-menu-item key="3">第三天</umrp-menu-item>
          </umrp-menu>
        </umrp-card>
      </umrp-col>
      <umrp-col :span="20">
        <umrp-card :border="false">
          <umrp-table :action-bar="true" :data="dataList" :pagination="false" @action="handleAction">
            <template #columns>
              <umrp-table-column title="序号" data-index="id" :width="60"></umrp-table-column>
              <umrp-table-column title="执行时间" data-index="executedAt" :width="80"></umrp-table-column>
              <umrp-table-column title="流程概述" data-index="description"></umrp-table-column>
              <umrp-table-column title="操作流程" data-index="outline"></umrp-table-column>
              <umrp-table-column title="话术" data-index="script"></umrp-table-column>
              <umrp-table-column title="备注" data-index="note"></umrp-table-column>
              <umrp-table-column title="状态" slot-name="status" :width="80"></umrp-table-column>
              <umrp-table-column title="操作" slot-name="action" :width="120"></umrp-table-column>
            </template>
            <template #status>
              <umrp-switch></umrp-switch>
            </template>
            <template #action>
              <umrp-space :size="10">
                <umrp-button type="primary" @click="modalVisible = true">编辑</umrp-button>
                <umrp-popconfirm message="您确认删除么？">
                  <umrp-button type="danger">删除</umrp-button>
                </umrp-popconfirm>
              </umrp-space>
            </template>
          </umrp-table>
        </umrp-card>
      </umrp-col>
      <umrp-modal :width="500" v-model:visible="modalVisible">
        <umrp-form>
          <umrp-form-item label="执行时间" :required="true">
            <umrp-datepicker></umrp-datepicker>
          </umrp-form-item>
          <umrp-form-item label="流程概述" :required="true">
            <umrp-textarea></umrp-textarea>
          </umrp-form-item>
          <umrp-form-item label="操作流程" :required="true">
            <umrp-textarea></umrp-textarea>
          </umrp-form-item>
          <umrp-form-item label="话术">
            <umrp-textarea></umrp-textarea>
          </umrp-form-item>
          <umrp-form-item label="备注">
            <umrp-textarea></umrp-textarea>
          </umrp-form-item>
        </umrp-form>
      </umrp-modal>
    </umrp-row>
  </umrp-container>
</template>